<template>
  <div>
    <div
      class="wrapper-container"
      style="display: flex; flex-direction: column; width: 100%; margin: 0 50px"
      v-show="visualChange"
    >
      <div class="search-container">
        <div class="search-container-left">
          <div
            class="search-container-item"
            v-for="(select, index) in selectList1"
            :key="index"
          >
            <div v-if="select.type === 'select'" class="box">
              <span v-show="select.name">{{ select.name }}</span>

              <el-select
                v-model="select.val"
                style="width: 120px"
                size="mini"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in select.valList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="box select-dialog">
            <span style="margin-top: 4px;">场地：</span>
            <div @click="editZYBC('more')" class="zybc-select">
              <div class="show">
                <div v-for="(item, index) in multipleSelection" :key="index" style="height: 28px; width: 120px;overflow: hidden;display: flex;
    align-items: center;">
                  {{ item.cdmc }}
                </div>
              </div>
            </div>
          </div>
          <div class="search-button" style="margin-left: 20px" @click="queryPlaceTimeTable_More">
            <img src="../../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
          <div class="search-button" style="margin-left: 20px" @click="resetAll">
            <!-- <img src="../../../../assets/assessment/icon-search.png" alt="" /> -->
            <span>重置</span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="wrapper-container"
      style="display: flex; flex-direction: column; width: 100%; margin: 0 50px"
      v-show="!visualChange"
    >
      <div class="search-container">
        <div class="search-container-left">
          <div class="box select-dialog" style="margin-left: 35px">
            <span style="margin-top: 4px;">场地：</span>
            <div @click="editZYBC('single')" class="zybc-select">
              <div class="show">
                <div v-for="(item, index) in multipleSelection" :key="index" style="height: 28px; width: 120px;overflow: hidden;display: flex;
    align-items: center;">
                  {{ item.cdmc }}
                </div>
              </div>
            </div>
          </div>
          <div class="search-button" style="margin-left: 20px" @click="queryPlaceTimeTable_One">
            <img src="../../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div
          ><div class="search-button" style="margin-left: 20px" @click="resetAll">
            <!-- <img src="../../../../assets/assessment/icon-search.png" alt="" /> -->
            <span>重置</span>
          </div>
        </div>
      </div>
    </div>
    <div class="export-right" :style="!visualChange ? 'margin-top:-30px' : ''">
      <div class="change-visual">
        <div :class="visualChange ? 'active' : ''" @click="changeVisual(true)">
          多室一表
        </div>
        <div :class="visualChange ? '' : 'active'" @click="changeVisual(false)">
          一室一表
        </div>
      </div>
      <div class="export-top" @click="exportData()">
        <img src="../../../../assets/assessment/icon-export.png" alt="" />
          <span>&ensp;导出Excel</span>
          <!-- <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            name="场地课表.xls"
            style="color: #f3b815"
          >

          </download-excel> -->
      </div>
    </div>

    <div class="body-manual-container-more" v-show="visualChange">
      <div>
        <ul v-for="data in tableListMore">
          <li>
            <span class="active"><div>星期</div></span>
            <span class="active"><div>节次</div></span>
            <span class="active"><div>{{data.cd}}</div></span>
          </li>
          <li v-for="(item, index) in data.courseList" :key="index">
            <div class="day-list">{{ item.xq }}</div>
            <div style="width: calc(100% - 250px)">
              <div v-for="list in item.list" class="section-item">
                <div class="section">
                  {{ list.jc }}
                </div>
                <div class="text">
                  {{ list.kc }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="body-manual-container" v-show="!visualChange">
      <div>
        <ul>
          <li>
            <span><div>节次</div></span>
            <span><div>星期一</div></span>
            <span><div>星期二</div></span>
            <span><div>星期三</div></span>
            <span><div>星期四</div></span>
            <span><div>星期五</div></span>
            <span><div>星期六</div></span>
            <span><div>星期日</div></span>
          </li>
          <li v-for="(item, key) in tableList" :key="key">
            <span>
              <div>
                <div>{{ item.jc }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w1 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w2 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w3 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w4 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w5 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w6 }}</div>
              </div>
            </span>
            <span>
              <div>
                <div>{{ item.w7 }}</div>
              </div>
            </span>

          </li>
          <li>
            <span><div>备注</div></span>
            <span><div style="width: 1525px"></div></span>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      title="选择场地"
      :visible.sync="selectClassRoomDialog"
      width="1500px"
      class="xuanze_jxcd"
    >
      <select-class-room  :source="'dialog'" @savePlaceInfo="savePlaceInfo" @cancelPlaceInfo="cancelPlaceInfo"></select-class-room>
      <div style="height:40px"></div>
    </el-dialog>
  </div>
</template>

<script>
import ButtonItem from "@/components/ButtonItem.vue";
import { queryPlaceTimeTable, queryPlaceByTypeAndName, queryCommonXueqi, queryPlaceListByName,queryPlaceTimeTable_More,
  queryPlaceTimeTable_More_Export, queryPlaceTimeTable_ExportCD, queryDefaultXueQi } from "@/api/trainingManagement/place.js";
import selectClassRoom from "../elective/selectClassRoom.vue";
export default {
  components: {
    ButtonItem,
    selectClassRoom,
  },
  data() {
    return {
      selectTab: "jzw", //选择建筑物标签
      queryName: "", //查询关键字
      tableData_place: [], //场地列表
      selectClassRoomDialog: false, //选择教学场地
      skdd: "", //授课地点
      skddId: "",//授课地点id
      afterPlace: "", //调课后地点
      afterPlaceId: "",
      // 选择列表数据
      multipleSelection: [],
      // 校区列表
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      visualChange: true, //true: 多班一表 false: 一班一表
      tableListMore: [], //多班一表 数据
      tableList: {}, // 一室一表
      selectList1: [
        {
          type: "select",
          name: "学期:",
          val: "",
          valList: [],
        },
        {
          type: "select",
          name: "周次:",
          val: "1",
          valList: [
            {
              id: "1",
              name: "提前一周",
            },
             {
              id: "2",
              name: "提前二周",
            },
             {
              id: "3",
              name: "提前三周",
            },
             {
              id: "4",
              name: "提前四周",
            },
             {
              id: "5",
              name: "提前五周",
            },
          ],
        },
      ],
      selectNode: {}, //选中树节点
      placeList: [], //场地列表
      placeType: "",
    };
  },
  created() {},
  mounted() {
    this.getDefaultXueQi();
    this.queryCommonXueqi();
  },
  methods: {
    async getDefaultXueQi(){
      queryDefaultXueQi().then(res=>{
        if(res.data.code == 200){
          this.selectList1[0].val = res.data.data;
          // this.semester = res.data.data;
        }
      }).then(()=>{
        // this.queryDAteClass()
      })
    },
    // 保存教学场地
    async savePlaceInfo(data) {
      if (data.length > 0) {
        if (data.length > 1) {
          this.$message.warning("请最多选择一个教学场地");
          return;
        } else {
          // if (this.selectPlaceType =='before') {
          //   this.skdd = data[0].cdmc;
          //   this.skddId = data[0].id;
          // } else {
          //   this.afterPlace = data[0].cdmc;
          //   this.afterPlaceId = data[0].id;
          // }
          this.multipleSelection = []
          this.multipleSelection.push({
            id: data[0].id,
            cdmc: data[0].cdmc
          })
          this.selectClassRoomDialog = false;
        }
      } else {
        this.$message.warning("请先选择教学场地");
        return;
      }
    },
    cancelPlaceInfo() {
      this.selectClassRoomDialog = false;
    },
    exportData() {
      if (this.visualChange) {
         if (this.multipleSelection.length > 0) {
            var ids = [];
            this.multipleSelection.forEach(item => {
              ids.push(item.id)
            })
            var data = {
              "name": this.selectList1[0].val,
              "tqzc": this.selectList1[1].val,
              "ids":ids
            }
            // 多班一班
            queryPlaceTimeTable_More_Export(data).then((res) => {
              /** 获取生成设置好的文件名 */
              /** 接收文件流 */
              const blob = new Blob([res.data]);
              let url = URL.createObjectURL(blob);
              /** 模拟浏览器操作Document，并模拟下载动作 */
              let link = document.createElement("a");
              link.style.display = "none";
              link.href = url;
              link.setAttribute("download", "课表.xlsx");
              document.body.appendChild(link);
              link.click();
            });
         }
      } else {
        var name = this.multipleSelection[0].id; //场地
        var type = "一室一表";
        // 一班一表
      queryPlaceTimeTable_ExportCD(name, type).then((res) => {
        /** 获取生成设置好的文件名 */
        /** 接收文件流 */
        const blob = new Blob([res.data]);
        let url = URL.createObjectURL(blob);
        /** 模拟浏览器操作Document，并模拟下载动作 */
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "课表.xlsx");
        document.body.appendChild(link);
        link.click();
      });
      }
    },
    // 获取学期列表
    async queryCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.selectList1[0].valList = res.data.data;
        // this.selectList1[0].val = this.selectList1[0].valList[0].id;
      }
    },
    submitCDXZDialog() {
      if (this.multipleSelection.length == 0) {
          this.$message.warning("请选择一个场地!");
          return;
        }
      if (this.placeType == 'single') {
        if (this.multipleSelection.length > 1) {
          this.$message.warning("只能选择一个场地!");
          return;
        }
      }
      this.selectClassRoomDialog = false;
    },
    // tab切换
    tabClick(str) {
      this.selectTab = str;
    },
    // 点击树节点
    handleNodeClick(node) {
      this.selectNode = node;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 选择专业班次
    editZYBC(str) {
      this.placeType = str;
      this.selectClassRoomDialog = true;
      this.queryPlaceByTypeAndName();
    },
    // 视角切换
    changeVisual(val) {
      this.visualChange = val;
      this.multipleSelection = [];
    },
    // 查询场地
    async queryPlaceByTypeAndName() {
      var _this = this;
      let type = _this.selectTab=='jzw'?'1':_this.selectTab=='bm'?'2':'3';
      let name = _this.queryName;
      const res = await queryPlaceByTypeAndName(type, name);
      if (res.data.code == 200) {
        this.data = res.data.data;
        this.selectNode = this.data[0];
        this.queryPlaceListByName();
      }
    },
    // 查询场地列表
    async queryPlaceListByName() {
      var cdmc = this.queryName;
      var cdlx = "";
      var ssjzw = "";
      var ssxq = "";
      if (this.selectTab=='jzw') {
        ssjzw = this.selectNode.id;
      }
      if (this.selectTab=='bm') {
        ssxq = this.selectNode.id;
      }
      if (this.selectTab=='lx') {
        cdlx = this.selectNode.id;
      }
      const res = await queryPlaceListByName(cdmc, cdlx, ssjzw, ssxq);
      if (res.data.code == 200) {
        this.tableData_place = res.data.data.records;
      }
    },

    async queryPlaceTimeTable_More() {
      if (this.multipleSelection.length > 0) {
        var ids = [];
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        var data = {
          "name": this.selectList1[0].val,
          "tqzc": this.selectList1[1].val,
          "ids":ids
        }
        const res = await queryPlaceTimeTable_More(data);
        if (res.data.code == 200) {
          this.tableListMore = res.data.data;
        }
      } else {
        this.$message.warning("请先选择场地!");
        return
      }

    },
    resetAll(){
      this.selectList1[0].val = '';
      this.selectList1[1].val = '';
      this.multipleSelection = [];
    },
    async queryPlaceTimeTable_One() {
      if (this.multipleSelection.length > 0) {
        var name = this.multipleSelection[0].id; //场地
        var type = "一室一表";
        const res = await queryPlaceTimeTable(name,type);
        if (res.data.code == 200) {
          this.tableList = res.data.data;
        }
      } else {
        this.$message.warning("请先选择场地!");
        return
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../styles/text.less";
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
<style lang="less" scoped>
@import "../../../../styles/supervision.less";

// .wrapper-container {
//   width: 1711px;
//   margin: 0 auto;
// }

/deep/ .table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    /*border-radius: 9px;*/
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  width: 100%;
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  // display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}

.body-manual-container {
  > div:nth-child(1) {
    width: calc(100% - 20px);
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 30px auto 0;
    ul {
      list-style: none;
      li:nth-child(n) {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          // padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          // padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 12.5%;
            height: 100px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: rgba(255, 56, 25, 1);
          }
          > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      li:nth-child(1) {
        > span {
          &:nth-child(n) {
            width: 12.5%;
            height: 60px;
            font-weight: bold;
          }
          > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
          }
        }
      }
    }
  }
}

.body-manual-container-more {
  > div:nth-child(1) {
    width: calc(100% - 20px);
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 30px auto 0;
    height: calc(100vh - 300px);
    overflow-y: auto;
    ul {
      list-style: none;
      li:nth-child(n) {
        color: #004ca7;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 250px;
            height: 100px;
          }
          &:last-child {
            width: calc(100% - 500px);
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: rgba(255, 56, 25, 1);
          }
          > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      li:nth-child(1) {
        > span {
          &:nth-child(n) {
            width: 250px;
            height: 60px;
            font-weight: bold;
          }
          &:nth-last-child(1) {
            width: calc(100% - 500px);
            height: 60px;
            font-weight: bold;
          }
          > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
          }
        }
      }
    }
  }
}
.day-list {
  width: 249px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-item {
  display: flex;
  align-items: center;
  height: 60px;
  border-left: 1px solid rgba(0, 76, 167, 0.4);
  border-bottom: 1px solid rgba(0, 76, 167, 0.4);

  .section {
    width: 250px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0, 76, 167, 0.4);
  }

  .text {
    width: calc(100% - 250px);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.section-item:nth-last-child(1) {
  border-bottom: 0;
}

.export-right {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 70px;
  margin-top: -50px;
}
.change-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 20px;
  > div {
    padding: 5px 15px;
    border-radius: 5px;
    margin: 0 10px;
    border: 1px solid #004ca7;
    color: #004ca7;
    cursor: pointer;
  }

  .active {
    background: #004ca7;
    color: #fff;
  }
}
.del-icon {
  color: #ff492e;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

/deep/ .xzjy .el-dialog__body {
  padding: 0 !important;
  .wrapper-container {
    width: 100% !important;
  }
  .wrapper-container .search-container .search-container-left {
    margin-left: 20px;
    flex-wrap: wrap;
    .search-container-item {
      width: 200px;
      margin-right: 10px;
      .box {
        > span {
          text-align: left;
          width: 80px;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
        .el-input--medium .el-input__inner {
          height: 28px;
        }
      }
    }
  }
}

/deep/ .el-tree-node__expand-icon.expanded {
  color: rgb(0, 76, 167);
}

.xzjy .tree {
  padding: 30px;
  color: rgb(0, 76, 167);
  font-weight: bold;
  font-size: 16px;
}
.select-list {
  display: flex;
  width: 650px;
  color: #004ca7;

  .yx {
    font-size: 18px;
    padding-left: 10px;
  }
  .cont {
    width: 580px;
    display: flex;
    overflow: auto;

    .tip {
      font-size: 18px;
      margin: 0 5px;
    }
  }
}

.zybc-select {
  display: flex;
  align-items: center;
  width: 200px;
  height: 28px;
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
  .show {
    height: 28px;
    width: 200px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
        flex-wrap: wrap;
    flex-direction: column;
    > div {
      padding: 0 10px;
    }
  }
}

.select-dialog {
  width: 300px;
  display: flex;
  color: #004ca7;
}

.class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}

.top-tab-query {
  margin-top: 20px;
  border-bottom: 1px solid #004ca7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 160px 0 40px;

  .tab {
    display: flex;
    width: 500px;
    align-items: center;
    justify-content: space-around;
  }

  .tab-active {
    padding: 10px 20px;
    background: #004ca7;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-weight: bold;
    width: 110px;
    text-align: center;
    cursor: pointer;
  }

  .tab-no-select {
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;
    color: #004ca7;
    font-weight: bold;
    background: #c7d7eb;
    width: 110px;
    text-align: center;
    cursor: pointer;
  }

  .query-tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 400px;
  }
}

.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}

.border-left {
  padding: 0px 30px;
  border-left: 1px solid #004ca7;
}
.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 20px;
}
.xuanze_jxcd {
  /deep/ .el-dialog {
    height: 900px;
  }
}
.export-top {
  cursor: pointer;
  width: 127px;
  height: 33px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 4px;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  > img {
    width: 17px;
    height: 17px;
  }
  > span {
     color: #f3b815;
  }
}
</style>
